<template>
    <view class="factory-sustainability-page">
        <!-- 顶部固定菜单组件 -->
        <TopBar
            left-icon="/static/user.png"
            scan-icon="/static/saoyisao.png"
            menu-icon="/static/menu.png"
            @menu="toggleMenu"
        />

        <!-- 返回箭头独立一行 -->
        <view class="back-row" @click="goBack">
            <image class="back-arrow-icon" src="/static/left.png" mode="aspectFit" />
        </view>
        
        <!-- 页面标题 -->
        <view class="title-wrap">
            <text class="title">Factory Profile</text>
            <text class="subtitle">Section 3. Sustainability</text>
        </view>

		<scroll-view scroll-y class="form-scroll">
			<!-- Electricity source -->
			<view class="section">
				<text class="section-title">Electricity source</text>
				<view class="row between">
					<text class="label">On-site renewables</text>
                    <view class="switch-row">
                        <text class="switch-text">Yes</text>
                        <switch class="toggle-switch" :checked="onSiteRenewables" @change="(e)=>onSiteRenewables.value = e.detail.value" color="#333" />
                        <text class="switch-text">No</text>
                    </view>
				</view>
                <view class="input">
                    <input placeholder="100%" v-model="onSiteRenewablesPercent" />
				</view>
				<view class="label mt16">Renewable/other source justification</view>
				<view class="input with-icon">
					<image src="/static/paperclip.png" class="clip" mode="aspectFit" />
					<input placeholder="" v-model="renewableJustification" />
				</view>
			</view>

			<!-- Water treatment -->
			<view class="section">
				<text class="section-title">Water treatment</text>
				<view class="row between">
					<text class="label">Recycled water</text>
                    <view class="switch-row">
                        <text class="switch-text">Yes</text>
                        <switch class="toggle-switch" :checked="recycledWater" @change="(e)=>recycledWater.value = e.detail.value" color="#333" />
                        <text class="switch-text">No</text>
                    </view>
				</view>
                <view class="input">
                    <input placeholder="100%" v-model="recycledWaterPercent" />
				</view>
				<view class="label mt16">Water treatment justification</view>
				<view class="input with-icon">
					<image src="/static/paperclip.png" class="clip" mode="aspectFit" />
					<input placeholder="" v-model="waterTreatmentJustification" />
				</view>
			</view>

			<!-- Fabric offcuts recycled -->
			<view class="section">
				<text class="section-title">Fabric offcuts recycled</text>
				<view class="row between">
					<text class="label">&nbsp;</text>
                    <view class="switch-row">
                        <text class="switch-text">Yes</text>
                        <switch class="toggle-switch" :checked="fabricOffcutsRecycled" @change="(e)=>fabricOffcutsRecycled.value = e.detail.value" color="#333" />
                        <text class="switch-text">No</text>
                    </view>
				</view>
                <view class="input">
                    <input placeholder="100%" v-model="fabricOffcutsPercent" />
				</view>
			</view>

			<!-- Waste treatment justification -->
			<view class="section">
				<text class="section-title">Waste treatment justification</text>
				<view class="input with-icon">
					<image src="/static/paperclip.png" class="clip" mode="aspectFit" />
					<input placeholder="" v-model="wasteTreatmentJustification" />
				</view>
			</view>

			<!-- Hazardous waste -->
			<view class="section">
				<view class="row between">
					<text class="label">Hazardous waste</text>
                    <view class="switch-row">
                        <text class="switch-text">Yes</text>
                        <switch class="toggle-switch" :checked="hazardousWaste" @change="(e)=>hazardousWaste.value = e.detail.value" color="#333" />
                        <text class="switch-text">No</text>
                    </view>
				</view>
				<text class="hint">chemical residues, dye containers, solvents</text>
			</view>

			<!-- Managed by provider -->
			<view class="section">
				<view class="row between">
					<text class="label">Managed by provider</text>
                    <view class="switch-row">
                        <text class="switch-text">Yes</text>
                        <switch class="toggle-switch" :checked="managedByProvider" @change="(e)=>managedByProvider.value = e.detail.value" color="#333" />
                        <text class="switch-text">No</text>
                    </view>
				</view>
			</view>

			<!-- Certified provider -->
			<view class="section">
				<text class="section-title">Certified provider (name or website)</text>
				<view class="input">
					<input placeholder="" v-model="certifiedProvider" />
				</view>
			</view>

			<button class="next-btn" @click="submitAndNext">Next</button>
		</scroll-view>

        <CustomTabbar active="home" />

        <!-- 账户菜单组件 -->
        <AccountMenu
            v-if="showMenu"
            :style="{ '--anchor-top': '70px', '--anchor-right': '16px' }"
            @close="closeMenu"
            @select="closeMenu"
        />
	</view>
</template>

<script setup>
import { ref } from 'vue';
import TopBar from '@/components/TopBar.vue';
import AccountMenu from '@/components/AccountMenu.vue';
import CustomTabbar from '@/components/CustomTabbar.vue';

const goBack = () => {
    uni.navigateTo({ url: '/pages/factory/factory-certification' });
};

// 顶部菜单显隐
const showMenu = ref(false);
const toggleMenu = () => { showMenu.value = !showMenu.value; };
const closeMenu = () => { showMenu.value = false; };

// 表单数据（所有开关默认左侧 true）
const onSiteRenewables = ref(false);
const onSiteRenewablesPercent = ref('');
const renewableJustification = ref('');

const recycledWater = ref(false);
const recycledWaterPercent = ref('');
const waterTreatmentJustification = ref('');

const fabricOffcutsRecycled = ref(false);
const fabricOffcutsPercent = ref('');

const wasteTreatmentJustification = ref('');

const hazardousWaste = ref(false);
const managedByProvider = ref(false);
const certifiedProvider = ref('');

const submitAndNext = () => {
    uni.navigateTo({ url: '/pages/factory/factory-info' });
};
</script>

<style lang="scss">
.factory-sustainability-page { min-height: 100vh; background: linear-gradient(180deg, #d9f0ff 0%, #e9f9ed 100%); }
.header { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.back-row { margin: 60px 8px 0 8px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 10; }
.back-arrow-icon { width: 28px; height: 28px; }
.title-wrap { display: flex; flex-direction: column; margin-left: 16px; }
.title { font-size: 22px; font-weight: 800; color: #0b1e2a; }
.subtitle { color: #3b5560; font-size: 14px; }

.form-scroll { padding: 0 16px 100px 16px; box-sizing: border-box; }
.section { margin-top: 22px; }
.section-title { font-size: 14px; font-weight: 700; color: #0b1e2a; margin-bottom: 10px; display: block; }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.label { font-size: 14px; color: #0b1e2a; }
.switch-row { display: flex; align-items: center; gap: 10px; }
.switch-text { color: #000; font-size: 14px; font-weight: 500; }
.hint { color: #7a8a93; font-size: 12px; margin-top: 6px; display: block; }
.mt16 { margin-top: 20px; }

.input { height: 44px; background: #fff; border-radius: 10px; display: flex; align-items: center; padding: 0 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); margin-top: 14px; }
.input.with-icon { position: relative; padding-left: 36px; }
.input input { flex: 1; height: 100%; border: none; outline: none; font-size: 14px; color: #333; }
.input input::placeholder { color: #b0b0b0; }
.clip { position: absolute; left: 10px; width: 18px; height: 18px; opacity: 0.8; }

/* 开关黑色主题 */
/* 恢复默认动画，仅统一黑色主题；默认值已设为 true（左侧） */
.toggle-switch :deep(.uni-switch-input) { background-color: #333 !important; border-color: #333 !important; }
.toggle-switch :deep(.uni-switch-input:before) { background-color: #333 !important; }
.toggle-switch :deep(.uni-switch-input.uni-switch-input-checked) { background-color: #333 !important; border-color: #333 !important; }
.toggle-switch :deep(.uni-switch-input.uni-switch-input-checked:before) { background-color: #fff !important; }

.next-btn { margin: 32px 8px 24px; height: 44px; background: #222; color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
</style>


